<template>
	<view class="histrory">
		<template v-if="list.length !=0">
			<view v-for="(item,index) in list" class="box" :key="item.projectId" @click="edit(item)">
				<view class="left">
					<view class="top f18 overflow-ellipsis">{{item.projectName}}</view>
					<view class="f14" style="color: #58aeef;" v-if="Number(item.day) <0"><text
							style="color: red;">报名已截止</text>
					</view>
					<view class="f14" style="color: #58aeef;" v-else>报名截止剩<text style="color: red;">{{item.day}}</text>天
					</view>

					<view class="middle f14">举行时间({{item.startTime}})</view>
				</view>
				<view class="right">

					<view class="tag-view">
						<view class="mjcTag" :key="tag" v-for="tag in item.tags || item.tagList">{{tag}}</view>
					</view>

				</view>
				<view class="rightTag shuipingchuizhi">
					<view class="statu1 w100" v-show="item.status===1">
						<text>已审核</text>
					</view>
					<view class="statu2 w100" v-show="item.status===0">
						<text>已驳回</text>
					</view>
					<view class="statu3 w100" v-show="item.status===null">
						<text>未审核</text>
					</view>
				</view>

			</view>
		</template>
		<template v-else>
			<notFoundData />
		</template>


	</view>
</template>

<script>
	import notFoundData from '@/components/notFoundData/index.vue'
	import * as utils from '@/utils/index.js'
	export default {
		data() {
			return {
				list: [],
				total: 0,
				editItem: null
			};
		},
		components: {
			notFoundData
		},
		methods: {
			async reloadPage() {
				try {
					const result = await this.$mjcrequest.request({
						url: this.$api.MyCreateitems,
						method: 'GET',
						header: this.$aplsjsonheader,
					})
					console.log(result)
					this.total = result.length
					if (result.length == 0) return
					this.list = result.map(item => {
						if (item.project.type == 0) {

							return {
								imgUrl: item.imgUrl || [],
								likes: item.likes,
								tags: item.tags,
								...item.project,
								day: utils.computedDownTime(item.project.endTime)
							}
						} else {

							const tagList = []
							tagList.push(item.project.createDepartment)
							tagList.push(utils.institute(item.project.instituteType))
							return {
								imgUrl: item.imgUrl || [],
								tagList: tagList,
								likes: item.likes,
								tags: item.tags,
								...item.project,
								day: utils.computedDownTime(item.project.endTime)
							}
						}


					})
					// console.log(this.list);
				} catch (e) {
					//TODO handle the exception
					this.$errMessageToast(e)
				}
			},
			edit(item) {
				console.log(item, 59);
				this.editItem = item
				this.$nextTick(() => {
					if (item.type === 0) {

						uni.navigateTo({
							url: '/pages/information/src/addItem?reload=true'
						})
					} else {

						uni.navigateTo({
							url: '/pages/information/src/addProject?reload=true'
						})

					}
				})

			},
		},
		async created() {
			this.$eventBus.$on('sendItemEditMsg', () => {
				this.$eventBus.$emit('editItemMsg', this.editItem)
			})
			this.$eventBus.$on('sendProjectEditMsg', () => {
				this.$eventBus.$emit('editProjectMsg', this.editItem)
			})
			this.reloadPage()


		},
		destroyed() {
			this.$eventBus.$off('sendItemEditMsg')
			this.$eventBus.$off('sendProjectEditMsg')
		}
	}
</script>

<style lang="scss" scoped>
	.histrory {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 0 15rpx;

		.box {
			margin: 25rpx 0;
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 10rpx 20rpx 15rpx 20rpx;
			box-sizing: border-box;
			font-weight: 550;
			display: flex;
			box-shadow: 0 4px 8px 2px #f0f1f1 !important;

			.left {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.right {
				flex: 1;
				box-sizing: border-box;

				.tag-view {
					width: 100%;
					height: 100%;
					flex-wrap: wrap;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-align: right;
					display: flex;
					align-items: center;
					overflow: auto;

					.mjcTag {
						padding: 5rpx;
						color: #2979ff;
						border-color: #2979ff;
						border-radius: 2px;
						font-size: 12px;
						line-height: 14px;
						border-width: 1rpx;
						border-style: solid;
						font-weight: 300;
						display: inline-block;
						margin: 12rpx;
					}
				}

			}
		}

		.rightTag {
			width: 80rpx;
			font-size: 20rpx;
			text-align: center;
			color: #fff;


			.statu1 {
				background: #1aad19;
				padding: 10rpx 5rpx;
			}

			.statu2 {
				background: #ff0000;
				padding: 10rpx 5rpx;
			}

			.statu3 {
				background: #404040;
				padding: 10rpx 5rpx;
			}
		}





	}
</style>
